<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pe="http://primefaces.org/ui/extensions"
	template="/WEB-INF/templates/template.xhtml">

	<ui:define name="headIncludes">
		<f:event listener="#{fornecedorBean.initializeForm(param.fornecedorId)}" type="preRenderView"/>
	</ui:define>

	<ui:define name="pageName">#{fornecedorBean.acao}</ui:define>
	
	<ui:define name="buttons">
		<p:commandButton value="Salvar" style="height:28px;" action="#{fornecedorBean.save}" update="@this, messageFormFornecedor" icon="ui-icon-disk"/>
		<p:commandButton value="Voltar" style="height:28px;" action="#{fornecedorBean.changeToList}" process="@this" icon="ui-icon-arrowreturnthick-1-w"/>
	</ui:define>

	<ui:define name="content">
		<p:panel>
			<p:messages id="messageFormFornecedor"/>
			<div>
				<p:selectOneRadio id="option2" value="#{fornecedorBean.currentFornecedor.tipoPessoa}" immediate="true" 
					rendered="#{fornecedorBean.currentFornecedor.id == null}" >					
					<f:selectItems value="#{fornecedorBean.tiposPessoa}"/>
					<f:ajax event="change" render="renderForm"  />
				</p:selectOneRadio>
				
				<p:outputPanel id="renderForm">
					<h:panelGrid columns="3" style="padding:5px;" rendered="#{fornecedorBean.currentFornecedor.tipoPessoa == 'JURIDICA'}">
						<h:outputText value="Código" />
						<h:outputText value="Razão social" />
						<h:outputText value="Nome fantasia *" />
	
						<p:inputText style="width:100px;" disabled="true" value="#{fornecedorBean.currentFornecedor.id}"/>
						<p:inputText style="width:350px;" value="#{fornecedorBean.currentFornecedor.razaoSocial}" maxlength="100"/>
						<p:inputText style="width:350px;" value="#{fornecedorBean.currentFornecedor.nome}" maxlength="100"
							required="#{fornecedorBean.currentFornecedor.tipoPessoa == 'JURIDICA'}" requiredMessage="Informe o nome fantasia."/>
					</h:panelGrid>
					
					<h:panelGrid columns="3" style="padding:5px;" rendered="#{fornecedorBean.currentFornecedor.tipoPessoa == 'FISICA'}">
						<h:outputText value="Código" />
						<h:outputText value="Nome completo *" />
						<h:outputText value="Apelido" />
	
						<p:inputText style="width:100px;" disabled="true" value="#{fornecedorBean.currentFornecedor.id}"/>
						<p:inputText style="width:350px;" value="#{fornecedorBean.currentFornecedor.nome}" maxlength="100"
							required="#{fornecedorBean.currentFornecedor.tipoPessoa == 'FISICA'}" requiredMessage="Informe o nome completo."/>
						<p:inputText style="width:350px;" value="#{fornecedorBean.currentFornecedor.apelido}" maxlength="50"/>
					</h:panelGrid>
					
					<h:panelGrid columns="4" style="padding:5px;">
						<h:outputText value="Logradouro *" />
						<h:outputText value="Número *" />
						<h:outputText value="Complemento" />
						<h:outputText value="Bairro *" />
	
						<p:inputText style="width:350px;" value="#{fornecedorBean.currentFornecedor.logradouro}" maxlength="40" required="true" requiredMessage="Informe o logradouro."/>
						<p:inputText style="width:80px;" value="#{fornecedorBean.currentFornecedor.numero}" maxlength="10" required="true" requiredMessage="Informe o número."/>
						<p:inputText style="width:150px;" value="#{fornecedorBean.currentFornecedor.complemento}" maxlength="20"/>
						<p:inputText style="width:200px;" value="#{fornecedorBean.currentFornecedor.bairro}" maxlength="20" required="true" requiredMessage="Informe o bairro."/>
					</h:panelGrid>
					
					<h:panelGrid columns="5" style="padding:5px;" id="panelLocal">
						<h:outputText value="CEP" />
						<h:outputText value="Cidade *" />
						<h:outputText value="Estado" />
						<h:outputText value="País" />
						<h:outputText value="" />
	
						<p:inputMask mask="99.999-999" style="width:150px;" value="#{fornecedorBean.currentFornecedor.cep}"/>
						
						<p:autoComplete id="inputCidade" var="cidade" value="#{fornecedorBean.currentFornecedor.cidade}" maxlength="30"
							itemLabel="#{cidade.cidade}" itemValue="#{cidade}" size="50" required="true" requiredMessage="Selecione a cidade."
							converter="cidadeConverter" completeMethod="#{fornecedorBean.getCidadeByQuery}">
							<p:ajax event="itemSelect" process="@this inputCidade" update="inputEstado inputPais inputDDDTel inputDDDCel"/>
						</p:autoComplete>
						
						<p:inputText style="width:200px;" disabled="true" value="#{fornecedorBean.currentFornecedor.cidade.estado.estado}" id="inputEstado"/>
						<p:inputText style="width:150px;" disabled="true" value="#{fornecedorBean.currentFornecedor.cidade.estado.pais.pais}" id="inputPais"/>
						<p:commandButton icon="ui-icon-search" style="height:24px;" actionListener="#{fornecedorBean.openDialogListCidade}" immediate="true" title="Selecionar cidade"/>
					</h:panelGrid>

					<h:panelGrid columns="5" style="padding:5px;" id="panelContato">
						<h:outputText value="Telefone" />
						<h:outputText value="" />
						<h:outputText value="Fax" />
						<h:outputText value="" />
						<h:outputText value="Site" />
	
						<p:inputMask mask="9?9" style="width:50px;" value="#{fornecedorBean.currentFornecedor.cidade.ddd}" id="inputDDDTel" maxlength="2" placeHolder=" "/>
						<p:inputMask mask="9999-9999" style="width:150px;" value="#{fornecedorBean.currentFornecedor.telefone}"/>
						<p:inputMask mask="9?9" style="width:50px;"  value="#{fornecedorBean.currentFornecedor.cidade.ddd}" id="inputDDDCel" maxlength="2" placeHolder=" "/> 
						<p:inputMask mask="9999-9999" style="width:150px;" value="#{fornecedorBean.currentFornecedor.fax}"/>
						<p:inputText style="width:350px;" value="#{fornecedorBean.currentFornecedor.site}" maxlength="100"/>
					</h:panelGrid>
					<h:panelGrid columns="4" style="padding:5px;">
						<h:outputText value="E-mail" />
						<h:outputText value="Pessoa para contato" />
						<h:outputText value="Telefone" />
						<h:outputText value="" />
	
						<p:inputText style="width:300px;" value="#{fornecedorBean.currentFornecedor.emailContato}" maxlength="50"/>
						<p:inputText style="width:250px;" value="#{fornecedorBean.currentFornecedor.nomeContato}" maxlength="50"/>
						<p:inputMask mask="9?9" style="width:50px;" value="#{fornecedorBean.currentFornecedor.dddContato}" maxlength="2" placeHolder=" "/>
						<p:inputMask mask="9999-9999" style="width:150px;" value="#{fornecedorBean.currentFornecedor.telContato}"/>
					</h:panelGrid>
					<h:panelGrid columns="4" style="padding:5px;" rendered="#{fornecedorBean.currentFornecedor.tipoPessoa == 'JURIDICA'}">
						<h:outputText value="Inscrição estadual" />
						<h:outputText value="CNPJ" />
						<h:outputText value="Condição de pagamento *" />
						<h:outputText value="" />
	
						<p:inputText style="width:150px;" value="#{fornecedorBean.currentFornecedor.inscricaoEstadual}" maxlength="20"/>
						<p:inputMask mask="99.999.999./9999-99" style="width:150px;" value="#{fornecedorBean.currentFornecedor.cnpj}"/>
						
						<p:autoComplete id="inputCondicaoPagamentoPJ" var="condicao" value="#{fornecedorBean.currentFornecedor.condicaoPagamento}" maxlength="30"
							itemLabel="#{condicao.condicaoPagamento}" itemValue="#{condicao}" size="50" required="true" requiredMessage="Selecione a condição de pagamento."
							converter="condicaoPagamentoConverter" completeMethod="#{fornecedorBean.getCondicaoPagamentoByQuery}">
							<p:ajax event="itemSelect" process="@this inputCondicaoPagamentoPJ"/>
						</p:autoComplete>
						
						<p:commandButton icon="ui-icon-search" style="height:24px;" immediate="true" actionListener="#{fornecedorBean.openDialogListCondicaoPagamento}" title="Selecionar condição de pagamento" />
					</h:panelGrid>			

					<h:panelGrid columns="4" style="padding:5px;" rendered="#{fornecedorBean.currentFornecedor.tipoPessoa == 'FISICA'}">
						<h:outputText value="RG" />
						<h:outputText value="CPF" />
						<h:outputText value="Condição de pagamento *" />
						<h:outputText value="" />
	
						<p:inputText style="width:150px;" value="#{fornecedorBean.currentFornecedor.rg}" maxlength="20"/>
						<p:inputMask mask="999.999.999-99" value="#{fornecedorBean.currentFornecedor.cpf}" maxlength="11"/>
						
						<p:autoComplete id="inputCondicaoPagamentoPF" var="condicao" value="#{fornecedorBean.currentFornecedor.condicaoPagamento}" maxlength="30"
							itemLabel="#{condicao.condicaoPagamento}" itemValue="#{condicao}" size="50" required="true" requiredMessage="Selecione a condição de pagamento."
							converter="condicaoPagamentoConverter" completeMethod="#{fornecedorBean.getCondicaoPagamentoByQuery}">
							<p:ajax event="itemSelect" process="@this inputCondicaoPagamentoPF"/>
						</p:autoComplete>
						
						<p:commandButton icon="ui-icon-search" style="height:24px;" actionListener="#{fornecedorBean.openDialogListCondicaoPagamento}" immediate="true" title="Selecionar condição de pagamento"/>
					</h:panelGrid>
					
					<h:panelGrid columns="1" style="padding:5px;">
						<h:outputText value="* Campos obrigatórios" />
					</h:panelGrid>
					
					<div style="width:100%; margin-top:10px;display: inline-block;">
						<h:outputText value="Produtos"/>
						<p:commandButton icon="ui-icon-search" value="Adicionar produto" actionListener="#{fornecedorBean.openDialogListProduto}" 
							style="float:right;" immediate="true"/>
					</div>
					<div style="padding-top:10px;">
						<p:dataTable var="produto" 
							value="#{fornecedorBean.currentProdutos}"
							paginator="true" rows="10" paginatorPosition="bottom"
							emptyMessage="Não há registros" id="tableProdutos">  
							
							<p:column headerText="Código" style="width:150px;">  
						    	<h:outputText value="#{produto.id}" />  
							</p:column>  
						 
							<p:column headerText="Descrição">  
						    	<h:outputText value="#{produto.descricao}" />  
							</p:column> 	
			
							<p:column headerText="" width="50" style="text-align:center;">
								<p:commandButton icon="ui-icon-trash"
									style="width: 24px; height: 24px;" 
									actionListener="#{fornecedorBean.removeProduto(produto.id)}" title="Remover"
									immediate="true"/>
								</p:column>
					  	</p:dataTable>
					</div>
				</p:outputPanel>
			</div>
		</p:panel>		
	</ui:define>
	<ui:define name="popups">
		<ui:include src="listCidade.xhtml"/>
		<ui:include src="formCidade.xhtml"/>
		<ui:include src="listEstado.xhtml"/>
		<ui:include src="formEstado.xhtml"></ui:include>
		<ui:include src="listPais.xhtml"></ui:include>
		<ui:include src="formPais.xhtml"/>
		<ui:include src="listCondicaoPagamento.xhtml"/>
		<ui:include src="formCondicaoPagamento.xhtml"/>
		<ui:include src="listFormaPagamento.xhtml"/>
		<ui:include src="formFormaPagamento.xhtml"></ui:include>
		<ui:include src="listProduto.xhtml"/>
		<ui:include src="formProduto.xhtml"/>
		<ui:include src="listGrupo.xhtml"/>
		<ui:include src="formGrupo.xhtml"></ui:include>
	</ui:define>
</ui:composition>